<template>
	<view class="main">
		<!-- <u-navbar :is-back="true" title="登陆" :background="background" back-icon-color="#000" title-color="#000"></u-navbar> -->
		<view class="back">
			<image src="../../../static/images/loginbank.png" mode=""></image>
		</view>
		<view class="form">
			<view class="title">
				教育APP
			</view>
			<view class="smalltit">
				教育贵于薰习，风气赖于浸染
			</view>
			<view class="inputs">
				<view class="phone">
					<view class="phone_l">
						<image src="../../../static/images/phone.png" mode="aspectFit"></image>
						<input type="number" maxlength="11" placeholder="请输入您的手机号 " placeholder-class="ploc"
							v-model="phone" />
					</view>
					<view class="phone_r" @click="getCode()">
						{{tips==''?'获取验证码':tips}}
					</view>
				</view>
				<view class="phone">
					<view class="phone_l">
						<image src="../../../static/images/code.png" mode="aspectFit"></image>
						<input type="number" maxlength="11" placeholder="请输入验证码 " placeholder-class="ploc"
							v-model="code" />
					</view>
				</view>
			</view>
			<view class="button" @click="handlogin()"> 
				登陆
			</view>
			<view class="bottom">
				<view class="bottom_l" @click="changed">
					<image :src="!checke?'../../../static/images/e.png':'../../../static/images/ed.png'" mode="">
					</image>
				</view>
				<view class="bottom_r">
					我已阅读并同意<text @click="gotxt()">《隐私政策》</text>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
		</u-verification-code>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				phone: '',
				code: '',
				background: {
					backgroundColor: '#fff',
				},
				tips: '',
				// refCode: null,
				seconds: 120,
				checke:false,
			};
		},
		methods: {
			changed() {
				this.checke = !this.checke
			},
			gotxt() {
				uni.navigateTo({
					url: '../../users/policy/policy'
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.phone == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: "none",
						mask: true,
						duration: 1000
					})
				} else if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						this.getcode()
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}

			},
			end() {
				this.$u.toast('倒计时结束');
			},
			start() {
				this.$u.toast('倒计时开始');
			},
			//获取验证码
			getcode() {
				global.$http.request({
					url: '/api/Sms/send',
					data: {
						tel: this.phone,
					}
				}).then(res => {
					console.log(res);
				})
			},
			handlogin() {
				if(this.checke){
					global.$http.request({
						url: '/api/Login/codelogin',
						data: {
							tel: this.phone,
							code: this.code,
						}
					}).then(res => {
						if (res.data.code == 200) {
							uni.showToast({
								title: res.data.msg,
								icon: "none",
								mask: true,
								duration: 1000
							})
							console.log(res);
							uni.setStorageSync('token', res.data.data.token);
							uni.setStorageSync('userinfo', res.data.data);
							setTimeout(function() {
								uni.switchTab({
									url: '../../indexs/index/index',
								})
							}, 1000)
						}
					})
				}else {
					this.$u.toast('请勾选我已阅读并同意《隐私政策》');
				}
			}
		}

	}
</script>

<style lang="scss">
	page {
		// background-color: #F7F7F7;

		.main {
			width: 750rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;

			.back {
				position: absolute;
				top: 0;
				z-index: -10;

				image {
					width: 750rpx;
					height: 100vh;
				}
			}

			.form {
				padding: 260rpx 75rpx 0rpx 75rpx;
				width: 750rpx;

				display: flex;
				flex-direction: column;
				align-items: center;

				.title {
					font-size: 111rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #FFFFFF;
				}

				.smalltit {
					padding-top: 44rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}

				.inputs {
					padding: 151rpx 0 213rpx 0;

					.phone {
						display: flex;
						align-items: center;
						padding: 65rpx 0 26rpx 40rpx;
						border-bottom: 2rpx solid #fff;

						.phone_l {
							display: flex;
							align-items: center;

							image {
								width: 20rpx;
								height: 31rpx;
								margin-right: 30rpx;
							}

							input {
								font-size: 30rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #FFFFFF;
							}

							.ploc {
								font-size: 30rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #FFFFFF;
							}
						}

						.phone_r {
							width: 175rpx;
							height: 58rpx;
							text-align: center;
							line-height: 58rpx;
							background: #FFFFFF;
							border-radius: 29px;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #000000;
						}
					}
				}

				.button {
					width: 600rpx;
					height: 80rpx;
					background: #FFFFFF;
					border-radius: 38rpx;
					line-height: 80rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #000000;
				}
				.bottom {
					width: 620rpx;
				
					margin: 40rpx auto;
					display: flex;
					align-items: center;
				
					.bottom_l {
						image {
							width: 30rpx;
							height: 30rpx;
						}
					}
				
					.bottom_r {
						margin-left: 27rpx;
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #808080;
				
						text {
							color: #1863FF;
						}
					}
				}
			}
		}

	}
</style>
